.replay-ui-wrapper {
  --replay-z-index: 1;
  --replay-controls-z-index: 2;
}

.replay-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--swm-replay-overlay-background);
}

.replay-video,
.vhs-wrapper {
  z-index: var(--replay-z-index);
}

.vhs-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 400;
  opacity: 0.8;
  pointer-events: none;
  opacity: 1;
  z-index: 450;
}

.vhs-noise:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* small bitmap displaying a white noise  */
  background: url();
  pointer-events: none;
  will-change: background-position;
  animation: noise 1s infinite alternate;
}

.crt-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(30deg, rgba(17, 20, 53, 0.3), rgba(118, 255, 241, 0.3));
  background-repeat: repeat;
  background-size: 100% 10%;
  animation: bgscroll 2s linear infinite;
}

.vhs-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 300;
  opacity: 0.5;
  will-change: opacity;
  animation: opacity 3s linear infinite;
}

.vhs-lines:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
  background-size: 100% 4px;
  will-change: background, background-size;
  animation: scanlines 0.2s linear infinite;
}

.vhs-bg {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 2rem;
  width: 100%;
  height: 100%;
  background: grey;
  opacity: 0.5;
}

.vhs-bg .vhs-noise:before {
  background-size: 150%;
}

.vhs-text {
  position: absolute;
  overflow: hidden;
  right: 10%;
  top: 15%;
  will-change: text-shadow;
  filter: blur(1px);
  font-family: "Courier new", fixed;
  animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
  0%,
  100% {
    background-position: 0 0;
  }

  10% {
    background-position: -5% -10%;
  }

  20% {
    background-position: -15% 5%;
  }

  30% {
    background-position: 7% -25%;
  }

  40% {
    background-position: 20% 25%;
  }

  50% {
    background-position: -25% 10%;
  }

  60% {
    background-position: 15% 5%;
  }

  70% {
    background-position: 0 15%;
  }

  80% {
    background-position: 25% 35%;
  }

  90% {
    background-position: -10% 10%;
  }
}

@keyframes opacity {
  0% {
    opacity: 0.6;
  }

  20% {
    opacity: 0.3;
  }

  35% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }

  60% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.7;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes bgscroll {
  100% {
    background-position: 0% 100%;
  }
}

@keyframes scanlines {
  from {
    background: linear-gradient(-30deg, to bottom, transparent 80%, rgba(0, 0, 0, 0.5) 51%);
    background-size: 100% 10%;
  }

  to {
    background: linear-gradient(-30deg, to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
    background-size: 100% 5%;
  }
}

@keyframes rgbText {
  0% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      0px 0 1px rgba(251, 0, 231, 0.8),
      0 0px 3px rgba(0, 233, 235, 0.8),
      0px 0 3px rgba(0, 242, 14, 0.8),
      0 0px 3px rgba(244, 45, 0, 0.8),
      0px 0 3px rgba(59, 0, 226, 0.8);
  }

  25% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      0px 0 1px rgba(251, 0, 231, 0.8),
      0 0px 3px rgba(0, 233, 235, 0.8),
      0px 0 3px rgba(0, 242, 14, 0.8),
      0 0px 3px rgba(244, 45, 0, 0.8),
      0px 0 3px rgba(59, 0, 226, 0.8);
  }

  45% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      5px 0 1px rgba(251, 0, 231, 0.8),
      0 5px 1px rgba(0, 233, 235, 0.8),
      -5px 0 1px rgba(0, 242, 14, 0.8),
      0 -5px 1px rgba(244, 45, 0, 0.8),
      5px 0 1px rgba(59, 0, 226, 0.8);
  }

  50% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      -5px 0 1px rgba(251, 0, 231, 0.8),
      0 -5px 1px rgba(0, 233, 235, 0.8),
      5px 0 1px rgba(0, 242, 14, 0.8),
      0 5px 1px rgba(244, 45, 0, 0.8),
      -5px 0 1px rgba(59, 0, 226, 0.8);
  }

  55% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      0px 0 3px rgba(251, 0, 231, 0.8),
      0 0px 3px rgba(0, 233, 235, 0.8),
      0px 0 3px rgba(0, 242, 14, 0.8),
      0 0px 3px rgba(244, 45, 0, 0.8),
      0px 0 3px rgba(59, 0, 226, 0.8);
  }

  90% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      -5px 0 1px rgba(251, 0, 231, 0.8),
      0 5px 1px rgba(0, 233, 235, 0.8),
      5px 0 1px rgba(0, 242, 14, 0.8),
      0 -5px 1px rgba(244, 45, 0, 0.8),
      5px 0 1px rgba(59, 0, 226, 0.8);
  }

  100% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6),
      1px -1px 8px rgba(255, 255, 235, 0.7),
      5px 0 1px rgba(251, 0, 231, 0.8),
      0 -5px 1px rgba(0, 233, 235, 0.8),
      -5px 0 1px rgba(0, 242, 14, 0.8),
      0 5px 1px rgba(244, 45, 0, 0.8),
      -5px 0 1px rgba(59, 0, 226, 0.8);
  }
}

@keyframes type {
  0%,
  19% {
    opacity: 0;
  }

  20%,
  100% {
    opacity: 1;
  }
}
